<template>
  <div>
    <films-swiper :key="datalist.length">
      <films-swiper-item
        v-for="data in datalist"
        :key="data.id"
        class="filmsuiperitem"
      >
        <img :src="data.imgUrl" alt="" />
      </films-swiper-item>
    </films-swiper>
    <films-header class="sticky"></films-header>
    <router-view></router-view>
  </div>
</template>
<script>
import filmsSwiper from '@/components/Films/FilmsSwiper.vue'
import filmsSwiperItem from '@/components/Films/FilmsSwiperItem.vue'
import filmsHeader from '@/components/Films/FilmsHeader.vue'
import axios from 'axios'
export default {
  data() {
    return {
      datalist: []
    }
  },
  mounted() {
    axios.get('/banner.json').then((res) => {
      console.log(res.data.banner)
      this.datalist = res.data.banner
    })
  },
  components: {
    filmsSwiper,
    filmsSwiperItem,
    filmsHeader
  }
}
</script>

<style lang="scss" scoped>
.filmsuiperitem {
  img {
    width: 100%;
  }
}
.sticky{
  position: sticky;
  top: 0;
  z-index: 9;
}
</style>
